<script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue';

  const centerImageUrl = '../../public/footer_logo.png';
  const logoImageUrl = '../../public/logo.png';

  const link = ref([
    {
      name: '吉林市博物馆',
      url: 'http://www.jlsmuseum.org.cn',
    },
    {
      name: '吉林市满族博物馆‌',
      url: 'http://www.jlsmzbwg.org.cn',
    },
    {
      name: '吉林市文庙博物馆',
      url: 'https://www.baidu.com/s?wd=%E5%90%89%E6%9E%97%E5%B8%82%E6%96%87%E5%BA%99%E5%8D%9A%E7%89%A9%E9%A6%86',
    },
    {
      name: '明清造船厂遗址博物馆',
      url: 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E6%98%8E%E6%B8%85%E9%80%A0%E8%88%B9%E5%8E%82%E9%81%97%E5%9D%80%E5%8D%9A%E7%89%A9%E9%A6%86',
    },
    {
      name: '水师营博物馆',
      url: 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E5%90%89%E6%9E%97%E6%B0%B4%E5%B8%88%E8%90%A5%E5%8D%9A%E7%89%A9%E9%A6%86',
    },
    {
      name: '建制博物馆',
      url: 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E5%90%89%E6%9E%97%E5%BB%BA%E5%88%B6%E5%8D%9A%E7%89%A9%E9%A6%86',
    },
    {
      name: '陶瓷博物馆',
      url: 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E5%90%89%E6%9E%97%E5%B8%82%E9%99%B6%E7%93%B7%E5%8D%9A%E7%89%A9%E9%A6%86',
    },
    {
      name: '丰满水电博物馆',
      url: 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E4%B8%B0%E6%BB%A1%E6%B0%B4%E7%94%B5%E5%8D%9A%E7%89%A9%E9%A6%86',
    },
  ]);

  function openWebsite(url) {
    window.open(url, '_blank');
  }
</script>
<template>
  <div class="main">
    <!-- <img :src="centerImageUrl" class="center-image" /> -->
    <img :src="logoImageUrl" class="logo" />

    <div style="position: absolute; left: 8vw; top: 180px; color: white; font-size: 0.7rem">
      邮箱：1192303424@qq.com
    </div>
    <div style="position: absolute; left: 8vw; top: 200px; color: white; font-size: 0.7rem"></div>
    <div style="position: absolute; left: 10.6vw; top: 220px; color: white; font-size: 0.7rem"></div>

    <div style="position: absolute; right: 24vw; top: 80px; color: white; font-size: 1.2rem; font-weight: 600">
      快速链接
    </div>

    <div style="position: absolute; right: 5vw; top: 110px; color: white; font-size: 0.8rem; width: 25vw">
      <div
        v-for="(item, index) in link"
        style="display: inline-block; margin-right: 20px; margin-top: 5px; margin-bottom: 5px; cursor: pointer"
        @click="openWebsite(item.url)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<style scoped>
  .main {
    position: relative;
    width: 100vw;
    height: 50vh;
    background-color: rgb(18, 97, 176);
  }
  .center-image {
    position: absolute;
    width: 30vw;
    object-fit: contain;
    top: 10px;
    left: 35vw;
  }

  .logo {
    position: absolute;
    top: 4rem;
    left: 8vw;
    width: 20rem;
  }
</style>
